<template>
    <div>
      <div>
          <VMapShow v-if="showMap" :show_tools="show_tools" :change_map_center="change_map_center" :change_marker="change_marker" :amap_markers="amap_markers" :amap_center="amap_center" :show_marker="show_marker"></VMapShow>
      </div>

    </div>
</template>

<script>
  import { getOrganInfo } from '@/api/organ.js';
  import { getCoordinateByType } from '@/api/datacenter.js';
  import VMapShow from '@/components/VMapShow.vue';
  export default{
    name:'DataCenter',
    components:{ VMapShow },
    data(){
      return {
         amap_center:[],
         amap_markers:[],
         showMap:false,
         show_tools:true
      }
    },
    created(){
       let send_data={
          api_token:this.$store.getters.getSessionId,
          fields:'x_coordinate,y_coordinate'
       };
      let that=this;
      getOrganInfo(send_data).then(function(response){
         let val=response.data.info;
         if(val.x_coordinate!='' && val.y_coordinate!=''){
            that.amap_center=[val.x_coordinate,val.y_coordinate];
            that.getMarkers('community');
         }
         that.showMap=true;
      })
    },
    methods:{
      getMarkers(type){
        //根据type获取坐标
        let send_data={
           api_token: this.$store.getters.getSessionId,
           type:type
        };
        let that=this;
        getCoordinateByType(send_data).then(function(response){
           let val=response.data.list;
           that.amap_markers=[];
           let markers = [];
           if(val.length>0){
             for(let i=0;i<val.length;i++){
               markers.push({
                   position:[val[i]['x_coordinate'],val[i]['y_coordinate']],
                   content: '<div style="text-align:center; background-color: hsla(180, 100%, 50%, 0.7); height: 50px; width: 50px; border: 1px solid hsl(180, 100%, 40%); border-radius: 50px; box-shadow: hsl(180, 100%, 50%) 0px 0px 2px;display:table;"><span style="font-size:1px;display:table-cell;vertical-align:middle;">'+val[i]['name']+'</span></div>',
               });
             }
             that.amap_markers=markers;
           }
        })
      },
      change_map_center(lng,lat){
        this.amap_center=[lng,lat];
      },
      //change type
      show_marker(type){
         this.getMarkers(type);
      },
      //change marker
      change_marker(lng,lat){
        this.amap_markers.push([lng,lat]);
      }
    }
  }
</script>

<style>
</style>
